<template>
    <div class="step-bar">
        <ul class="step-list clearfix">
            <li class="clearfix" v-for="(item,index) in stepList" :key="index">
                <div class="left fl" :class="{active: item.active}">
                    <span v-if="!item.completed">{{index+1}}</span>
                    <i class="el-icon-check" v-else></i>
                </div>
                <div class="right fl">
                    <p class="title">{{item.title}}</p>
                    <p class="sub-title">{{item.subtitle}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: ["step"],
    data() {
        return {
            stepList: [
                {
                    active: true,
                    completed: false,
                    title: '输入企业基本信息',
                    subtitle: '输入企业名称、性质等信息'
                },
                 {
                    active: false,
                    completed: false,
                    title: '优惠政策选择',
                    subtitle: '选择您需要查询的优惠政策'
                },
                 {
                    active: false,
                    completed: false,
                    title: '企业信息完善',
                    subtitle: '进一步填写企业信息，确定是否 能够享受对应的优惠政策'
                },
                 {
                    active: false,
                    completed: false,
                    title: '是否适合我的企业',
                    subtitle: '获取查询结果及优惠政策 享受报告'
                }
            ]
        }
    },
    created() {
        this.stepList.map((item,idx) => {
            item.active = idx+1 == this.step?true:false
            item.completed = idx+1 < this.step?true:false
        })
    }
}
</script>

<style lang="less" scoped>
.step-bar{
    width: 100%;
    padding: 35px 50px;
    background-color: #f5f5f5;
    border-radius: 6px 6px 0 0;
    .step-list{
        li{
            float: left;
            width: 25%;
            position: relative;
            line-height: 26px;
            .left{
                width: 33px;
                height: 33px;
                background-color: transparent;
                text-align: center;
                line-height: 32px;
                color: #7d8bee;
                border: 1px solid #7d8bee;
                font-size: 18px;
                border-radius: 50%;
                &.active{
                    background-color: #465aeb;
                    border: 1px solid #465aeb;
                    color: #fff;
                }
            }
            .right{
                max-width: 200px;
                margin-left: 15px;
                .title{
                   font-size: 16px;
                   color: #465aeb; 
                }
                .sub-title{
                    font-size: 14px;
                    color: #999999;
                    line-height: 20px;
                }
               
            }
            &:not(:last-child){
                .right::after{
                    content: '';
                    position: absolute;
                    width: 80px;
                    height: 1px;
                    background-color: #7d8bee;
                    right: 10px;
                    top: 12px;
                }
            }
            &:nth-child(2),&:nth-child(3){
                .right::after{
                    width: 100px;
                    right: 15px;
                }
            }
        }
    }
}
</style>

